<template>
	<div class="level-panel relative" :class="`level-panel__${type}`">
		<div class="level-panel__top">
			<div>
				<account-avatar :data="userInfo?.avatar" :width="50" @click="handleProfile" />
			</div>
			<div class="user-info">
				<template v-if="accountStore.isLogin">
					<p class="text-lg text-white">
						{{ userInfo?.nickName || userInfo?.userName }}
					</p>
					<p class="text-sm text-t-7">@{{ userInfo?.userName }}</p>
					<p class="user-info-level">
						{{ $t('rewards.levelPanel.currentLevel') }}:
						<span class="uppercase">{{ typeModal }}</span>
						{{ level.current.level }}
					</p>
				</template>
				<base-button
					v-else
					type="primary"
					textT="account.login"
					bold
					block
					@click="onLogin"
					class="h-[28px]" />
			</div>
		</div>
		<div class="level-panel__content">
			<div class="user-level-label gap-1">
				{{
					typeModal === 'vip'
						? $t('rewards.levelPanel.levelUpProgress1')
						: $t('rewards.levelPanel.starUpProgress2')
				}}

				<n-popover trigger="hover">
					<template #trigger>
						<base-icon name="about" />
					</template>
					<div class="p-5 w-[400px] whitespace-pre-wrap break-words text-sm text-t-1">
						{{
							typeModal === 'vip'
								? $t('rewards.levelPanel.levelUpProgress1Tip')
								: $t('rewards.levelPanel.starUpProgress2Tip')
						}}
					</div>
				</n-popover>
			</div>
			<div class="mb-2">
				<n-progress
					type="line"
					color="var(--color-success)"
					:percentage="Number(level.progress)"
					:height="12"
					indicator-text-color="var(--color-success)" />
				<div class="flex justify-between items-center">
					<div class="user-level-number user-level-current flex items-center">
						<base-image
							v-if="!level.current.logo"
							src="activity/vip-level.svg"
							alt=""
							class="w-[20px] -translate-x-1" />
						<base-image
							v-else-if="!accountStore.isLogin || level.current.level === 0"
							:src="level.current.logo"
							alt=""
							class="w-[20px]" />
						<base-image v-else :src="level.current.logo" alt="" type="server" class="w-[20px]" />
						<p class="text-sm">
							{{ level.current?.name }}
						</p>
					</div>

					<div
						class="user-level-number user-level-current flex items-center"
						v-if="Number(level.progress) !== 100">
						<base-image v-if="level.next.level === 0" :src="item.icon" alt="" class="w-[20px]" />
						<base-image v-else :src="level.next.logo" alt="" type="server" class="w-[20px]" />
						<p class="text-sm">
							{{ level.next?.name }}
						</p>
					</div>
				</div>
			</div>
			<div
				class="to-level-benefits text-warning cursor-pointer"
				@click="$router.push(`/rewards-${type}`)">
				{{
					typeModal === 'vip'
						? $t('rewards.levelPanel.viewVipLevelsBenefits')
						: $t('rewards.levelPanel.viewStarLevelsBenefits')
				}}
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAccountStore, useProfileStore } from '@/store'
import { BaseButton, BaseImage, BaseIcon } from '@/components/base'
import { NPopover, NProgress } from 'naive-ui'
import { AccountShowType, UserInfo } from '@/types'
import { AccountAvatar } from '@/components/account'

const props = defineProps({
	item: Object as any,
	level: Object as any,
	type: String,
	bgClass: {
		type: String,
		default: 'bg-gradient-2'
	}
})

const typeModal = computed(() => props.type)
const profileStore = useProfileStore()
const accountStore = useAccountStore()
const userInfo: any = computed<UserInfo | null>(() => profileStore.userInfo)
const handleProfile = () => {
	profileStore.showProfile({
		show: true,
		userId: profileStore.userInfo?.userId
	})
}

const onLogin = () => {
	accountStore.showAccount(AccountShowType.login)
}
</script>

<style lang="scss" scoped>
.level-panel {
	position: relative;
	//width: 300px;
	//margin: 0 auto;
	//height: 176px;
	margin: 0 12px;
	padding: 6px 8px 10px 8px;
	border-radius: 10px;
	box-shadow: 0 2px 4px 0 #00000026;
	background: var(--color-bg-2) center 0 / cover;
	font-size: 12px;
	color: var(--color-white);
	overflow: hidden;
	&__vip {
		background-image: url('@/assets/img/activity/level-panel-vip.svg'),
			linear-gradient(180deg, #510c63, #2e394b);
	}
	&__star {
		background-image: url('@/assets/img/activity/level-panel-star.svg'),
			linear-gradient(180deg, #270c63, #323f55);
	}
	.level-panel__top {
		display: flex;
		align-items: center;
		gap: 10px;
		height: 62px;
	}
	.level-panel__content {
	}
	.user-info {
		display: flex;
		flex-direction: column;
		padding-top: 10px;
		.user-info-name {
			font-size: 16px;
		}
		.user-info-id {
			margin: 3px 0;
			color: hsla(0, 0%, 100%, 0.5);
		}
		.user-info-level {
		}
	}
	.user-level-label {
		display: flex;
		align-items: center;
		height: 16px;
		margin: 21px 0 4px;
		.user-level-percentage {
			margin-left: auto;
			color: var(--color-success);
		}
		.level-panel-desc {
			display: flex;
			margin-left: 2px;
			:deep(.up-betting-desc__triangle) {
				left: 2px;
				bottom: 12px;
			}
			:deep(.up-betting-desc__icon),
			.icon-2up {
				font-size: 16px;
				color: #ffffffb2;
			}
		}
	}
	:deep(.van-progress) {
		--van-progress-height: 12px;
		--van-progress-color: var(--color-success);
		--van-progress-background: #00000080;
		overflow: hidden;
		.van-progress__portion {
			max-width: 100%;
		}
	}
	.user-level-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 20px;
		margin: 3px 0 9px;
		.user-level-number {
			display: flex;
			align-items: center;
			img {
				width: 20px;
				height: 20px;
			}
		}
	}
	.to-level-benefits {
		color: var(--color-warning);
	}
}

:deep(.n-progress .n-progress-graph .n-progress-graph-line .n-progress-graph-line-rail) {
	background-color: #00000080;
}

.up-betting-desc__content {
	//position: fixed;
	//width: 100%;
	//left: 0.48rem;
	//right: 0.48rem;
	//transform: translateY(calc(-100% - 0.21333rem));
	//z-index: 10000;
	//padding: 0.21333rem;
	//border-radius: 0.21333rem;
	//font-size: 0.32rem;
	//line-height: 0.48rem;
	background: var(--color-black);
	//opacity: 0.9;
	color: var(--color-white);
	//white-space: pre-wrap;
	//overflow-wrap: break-word;
	//max-width: 320px;
}
</style>
